<template>
    <pc-nav></pc-nav>
  <div class="container-fluid mb-3 p-2">
    <swiper class="swiper" circular
            indicator-dots="true"
            autoplay="true"
            interval="5000"
            duration="500"
            style="height: 400px">
      <swiper-item style="height: 400px;" v-for="(item, index) in pcbanner.data">
        <view class="swiper-item swiper-item1" style="height: 400px">
          <A :href="item.url">
            <image mode="aspectFill" :src="'https://file-1259487950.cos.ap-beijing.myqcloud.com/' + item.src" class="d-block w-100" style="width: 100%; height: 400px" />
          </A>
        </view>
      </swiper-item>

<!--      <swiper-item>
        <view class="swiper-item swiper-item2" style="height: 400px">
          <img src="https://file-1259487950.cos.ap-beijing.myqcloud.com/upload/ad/20241021/20241021023748.png" class="d-block w-100" style="width: 100%; height: 400px" />
        </view>
      </swiper-item>

      <swiper-item>
        <view class="swiper-item swiper-item3" style="height: 400px">
          <img src="https://file-1259487950.cos.ap-beijing.myqcloud.com/upload/ad/20240311/20240311104459.jpg" class="d-block w-100" style="width: 100%; height: 400px" />
        </view>
      </swiper-item>-->
    </swiper>
  </div>
  <div class="container mt-3 mb-3 p-2" style="display: none;">
    <div class="row">
      <div class="col">
        <img src="https://wkadmin.jhpress.com/uploads/wxw/duihuan.png" class="img-fluid" />
      </div>
      <div class="col">
        <img src="https://wkadmin.jhpress.com/uploads/20241207/1a17e958fd1c18853a8c476aac971fed.png" class="img-fluid" />
      </div>
      <div class="col">
        <img src="https://wkadmin.jhpress.com/uploads/20241207/711da4abe9fc35a3dd15837c21e78e07.png" class="img-fluid" />
      </div>

    </div>
  </div>

  <div class="container mb-3">
    <div class="row">
      <h3 class="category-tit">精品班型</h3>
    </div>
    <div class="row">
      <div class="col-12" v-for="(item, index) in goodscard" :key="index">
      <s-block :name-data="item.data">
        <s-block-item :type="item.type+'pc'" :data="item.data" />
      </s-block>
      </div>
    </div>
  </div>

  <div class="container mb-3">
    <div class="row">
      <h3 class="category-tit">讲师介绍</h3>
    </div>
    <div class="row">
      <s-mingshi :date_mingshi="mingshi.data"></s-mingshi>
    </div>
  </div>

  <div class="container mb-3 p-3" style="text-align: center">
    <img style="width: 60%;" src="https://wkadmin.jhpress.com/uploads/20241222/6593324b782b69b122acc624b076e694.png"/>
  </div>
<!--  <div class="container mb-3 p-2">-->
<!--    <img style="width: 50%;" src="https://wkadmin.jhpress.com/uploads/20241124/9971a49760a07c313b47c1813ed8fda1.png"/>-->
<!--  </div>-->
  <div class="container-fluid mb-3">
    <pc-footer></pc-footer>
  </div>
  <!-- 广告模块 -->
  <s-popup-image />


</template>
<script setup>
  import {
    computed, reactive,
  } from 'vue';

  import {
    onLoad,
  } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import $share from '@/sheep/platform/share';
  import { forEach } from 'lodash';
  import PcNav from '@/sheep/components/pc-nav/pc-nav.vue';
  import PcFooter from '@/sheep/components/pc-footer/pc-footer.vue';
  import leftNav from '@/sheep/components/left-nav/left-nav.vue';
  import request from '@/sheep/request';



  // 隐藏原生tabBar
  uni.hideTabBar({
    fail: () => {},
  });

  const template = computed(() => sheep.$store('app').template?.home);
  const appcontent = sheep.$store('app').template?.home;
  const pcbanner = reactive({
    data: {},
  });
  const imagebanner = reactive({
    data: {},
  });
  const goodscard = reactive({
    data: {},
  });
  const mingshi = reactive({
    data: {},
  });


  function getimageBanner(){
    let appcon = sheep.$store('app').template?.home;
    let images =  appcon.data;
    //console.log(imageBanner);
    for(let i = 0; i < images.length; i++){
      if(images[i]['type']=='imageBanner'){
        var images_banner = images[i].data.list;
        //console.log(imageBanner[i].data.list);
        break;
      }
    }
    if(images.length == 0){
      //console.log("imagebanner");
      setTimeout(getimageBanner, 500);

    }else{
      imagebanner.data = images_banner;
    }

  }

  function getmingshi(){
    let appcon = sheep.$store('app').template?.home;
    console.log(appcon)
    let images =  appcon.data;
    for(let i = 0; i < images.length; i++){
      if(i=='6'){
        var images_banner = images[i].data.list;
        //console.log(images_banner);
        break;
      }
    }
    if(images.length == 0){
      //console.log("imagebanner");
      setTimeout(getmingshi, 500);

    }else{
      mingshi.data = images_banner;
    }
  }

  function getgoodsCard(){
    let appcon = sheep.$store('app').template?.home;
    console.log(appcon);
    let appcon_data =  appcon.data;
    for(let i = 0; i < appcon_data.length; i++){
      if(appcon_data[i]['type']=='goodsCard'){
        var goodscard_con = appcon_data[i];
        break;
      }
    }
    //console.log(goodscard_con)
    if(goodscard_con.length == 0){
      setTimeout(getgoodsCard, 500);

    }else{
      goodscard.data = goodscard_con;
    }
  }

  function getRecommend(params) {
    return new Promise(async (resolve, reject) => {
      try {
        const res = await request({
          url: 'index/page?id=14',
          method: 'GET',
          params,
        });
        //console.log(res);
        //return res;
        let ids = [];
        if (res.data) {
          ids = res.data.diypage.page.data[0].data.list;
        }
        pcbanner.data = ids;
        console.log(ids);
      } catch (error) {
        reject(error);
      }
    });
  }


  onLoad((options) => {
    // 预览模板
    if (options.templateId) {
      sheep.$store('app').init(options.templateId);
    }
    //let tkname = options.name;

    console.log(options.taken);
    if(options.taken){
      //sheep.$store.user.setToken(options.taken);
      const code = sheep.$api.user.loginpc(options.taken);
    }

    console.log("code:------------");
    //sheep.$platform.useProvider("wechat").login();
    //console.log("32323");
    getRecommend();

    setTimeout(getimageBanner, 500);
    setTimeout(getgoodsCard,500);
    setTimeout(getmingshi,500);
  });
</script>

<style type="text/style" scoped>
  .category-tit{
    font-size: 24px !important;
    font-weight: bold;
    line-height: 44px;
    margin-top: 30px;
  }

  .m-60{
    margin-bottom: 60px;
  }
  .button-hover{background: none !important;}
  /* 自定义 Carousel 过渡效果 */
  .carousel-item {
    transition: transform 0.6s ease, opacity 0.6s ease-out; /* 注意 transform 在前 */
  }
  .carousel-control-next:hover, .carousel-control-prev:hover{ background-color: none;}
  .carousel-control-next:after, .carousel-control-prev:after{border: none;}

  /*讲师*/
  .banner {
    padding-top:80px;
  }
  .banner h1 {
    font-size:36px;
    text-align:center;
    font-weight:normal;
  }
  .banner h2 {
    font-size:18px;
    color:#535353;
    text-align:center;
    font-weight:normal;
    margin:20px 0 60px;
  }
  .banner .swiper {
    width:1200px;
    margin:0 auto;
    position:relative;
  }
  .current-swiper {
    width:650px;
    height:370px;
    border-radius:10px;
    margin:0 auto;
    box-shadow:0 0 20px rgba(0,0,0,0.05);
    position:relative;
    z-index:99;
  }
  .left-swiper {
    position:absolute;
    left:117px;
    top:52px;
    z-index:1;
  }
  .right-swiper {
    position:absolute;
    right:117px;
    left:auto;
    top:52px;
    z-index:1;
  }
  .nocurrent-swiper {
    width:479px;
    height:273px;
    border-radius:8px;
    box-shadow:0 0 20px rgba(0,0,0,0.05);
  }
  .nocurrent-swiper:before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(237,240,240,0.9);
    z-index:99;
  }
  .slide1 {
    background:url(../images/p1.jpg) no-repeat right 50%/auto 100% #fff;
  }
  .slide2 {
    background:url(../images/p2.jpg) no-repeat right 50%/auto 100% #e2e3e8;
  }
  .slide3 {
    background:url(../images/p3.jpg) no-repeat right 50%/auto 100% #f0faf9;
  }
  .title {
    padding-top:70px;
    margin-left:45px;
    height:29px;
    line-height:29px;
    font-size:18px;
    color:#666;
  }
  .nocurrent-swiper .title {
    padding-top:44px;
    margin-left:30px;
    font-size:16px;
    height:25px;
    line-height:25px;
  }
  .name {
    margin-left:45px;
    height:55px;
    display:inline-block;
    position:relative;
    line-height:55px;
    padding-bottom:9px;
    padding-right:55px;
    border-bottom:1px solid #dddddd;
    font-size:36px;
    color:#333;
  }
  .nocurrent-swiper .name {
    height:46px;
    line-height:46px;
    font-size:30px;
    padding-right:46px;
    margin-left:30px;
  }
  .name:before {
    content:'';
    position:absolute;
    width:30px;
    height:30px;
    right:10px;
    top:0;
    bottom:0;
    margin:auto;
    background:url(../images/curr_sectbg.png) no-repeat center center;
  }
  .nocurrent-swiper .name:before {
    width:26px;
    height:26px;
    background-size:100% 100%;
  }
  .detail {
    margin-left:45px;
    width:275px;
    margin-top:30px;
    padding-right:5px;
    line-height:24px;
    color:#bbb;
    font-size:14px;
  }
  .nocurrent-swiper .detail {
    font-size:12px;
    line-height:20px;
    width:235px;
    margin-left:30px;
  }
  .swiper-button-prev {
    width:46px;
    height:46px;
    background:url(../images/curr_prev.png) no-repeat center center;
  }
  .swiper-button-next {
    width:46px;
    height:46px;
    background-size:auto;
    background-image:url(../images/curr_next.png);
  }
</style>
